<template>
  <div>
    <div class="middle-box">
      <span class="title"> 对方联系 </span>
    </div>
    <div class="btn_asset">
      <span class="btn_left">
        <el-button type="primary" @click="NewData"> 新增 </el-button>
        <el-button @click="batchDelete"> 删除 </el-button>
      </span>
      <span class="btn_right">
        <el-button size="small">
          <el-icon style="margin-right: 2px; margin-bottom: 2px"
            ><RefreshRight /></el-icon
          >刷新
        </el-button>
      </span>
    </div>
    <el-table
      stripe
      border
      height="100%"
      size="small"
      :data="state.tableData"
      :cell-class-name="tableCellClassName"
      v-loading="state.tableData.loading"
      @cell-click="cellClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="50" />
      <el-table-column align="center" label="姓名">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex && scope.column.index === state.columnIndex
            "
          >
            <el-select
              v-model="scope.row.name"
              placeholder="请输入"
              size="small"
              filterable
              clearable
              :option="state.option"
              fit-input-width
            >
              <el-option
                v-for="item in state.option"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </div>
          <span v-else>
            {{ scope.row.name }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="电话">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input v-model="scope.row.phone" size="small" clearable> </el-input>
          </div>
          <span v-else>
            {{ scope.row.phone }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="手机">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input v-model="scope.row.mobilephone" size="small" clearable> </el-input>
          </div>
          <span v-else>
            {{ scope.row.mobilephone }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="邮箱">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input v-model="scope.row.email" size="small" clearable> </el-input>
          </div>
          <span v-else>
            {{ scope.row.email }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="QQ">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input v-model="scope.row.QQ" size="small" clearable> </el-input>
          </div>
          <span v-else>
            {{ scope.row.QQ }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="部门">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input v-model="scope.row.apartment" size="small" clearable></el-input>
          </div>
          <span v-else>
            {{ scope.row.apartment }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="职务">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input v-model="scope.row.job" size="small" clearable></el-input>
          </div>
          <span v-else>
            {{ scope.row.job }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="岗位">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input v-model="scope.row.gangwei" size="small" clearable></el-input>
          </div>
          <span v-else>
            {{ scope.row.gangwei }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="备注">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input v-model="scope.row.beizhu" size="small" clearable></el-input>
          </div>
          <span v-else>
            {{ scope.row.beizhu }}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增对方信息 -->
    <el-dialog title="对方信息" v-model="state.dialogData.show" width="756px">
      <el-form
        :model="formData"
        :rules="formRules"
        label-suffix=":"
        label-width="70px"
        ref="form"
      >
        <el-row :gutter="44">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="formData.name"
                fit-input-width
                clearable
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="phone">
              <el-input
                v-model="formData.phone"
                fit-input-width
                clearable
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="44">
          <el-col :span="12">
            <el-form-item label="手机" prop="mobilephone">
              <el-input
                v-model="formData.mobilephone"
                fit-input-width
                clearable
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model="formData.email"
                fit-input-width
                clearable
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="44">
          <el-col :span="12">
            <el-form-item label="QQ" prop="QQ">
              <el-input
                v-model="formData.QQ"
                fit-input-width
                clearable
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门" prop="apartment">
              <el-input
                v-model="formData.apartment"
                fit-input-width
                clearable
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="44">
          <el-col :span="12">
            <el-form-item label="职务" prop="job">
              <el-input
                v-model="formData.job"
                fit-input-width
                clearable
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位" prop="gangwei">
              <el-input
                v-model="formData.gangwei"
                fit-input-width
                clearable
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="44">
          <el-col :span="24">
            <el-form-item label="备注" prop="beizhu">
              <el-input
                v-model="formData.beizhu"
                :rows="2"
                type="textarea"
                fit-input-width
                clearable
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel" type="default" size="small"
            >取消</el-button
          >
          <el-button
            type="primary"
            size="small"
            style="background: #5d9df5"
            @click="next"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";

const NewData = () => {
  state.dialogData.show = true;
};

const cancel = () => {
  state.dialogData.show = false;
  form.value.clearValidate();
};

const formData = reactive({
  name: "",
  // 电话
  phone: "",
  // 手机
  mobilephone: "",
  // 邮箱
  email: "",
  // QQ
  QQ: "",
  // 部门
  apartment: "",
  // 职务
  job: "",
  // 岗位
  gangwei: "",
  // 备注
  beizhu: "",
});

const formRules = reactive({
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
});

const state = reactive({
  rowIndex: -1, //行索引
  columnIndex: -1, //列索引
  tableData: [
    {
      id: 1,
      // 姓名
      name: "王艳娇",
      // 电话
      phone: "1223234234",
      // 手机
      mobilephone: "1324343443",
      // 邮箱
      email: "z.xbo@qq.com",
      // QQ
      QQ: "132383838",
      // 部门
      apartment: "开发部",
      // 职务
      job: "开发",
      // 岗位
      gangwei: "开发岗",
      // 备注
      beizhu: "什么什么",
    },
    {
      id: 2,
      // 姓名
      name: "王艳娇",
      // 电话
      phone: "1223234234",
      // 手机
      mobilephone: "1324343443",
      // 邮箱
      email: "z.xbo@qq.com",
      // QQ
      QQ: "132383838",
      // 部门
      apartment: "开发部",
      // 职务
      job: "开发",
      // 岗位
      gangwei: "开发岗",
      // 备注
      beizhu: "什么什么",
    },
  ],
  option: [
    {
      value: '王艳娇',
      label: '王艳娇',
    },
    {
      value: '大',
      label: '大',
    }
  ],
  dialogData: {
    title: "",
    show: false,
  }
});
const form = ref();
// 保存点击事件
const next = async () => {
  await form.value.validate();
  state.dialogData.show = false;
};
const tableCellClassName = ({ row, column, rowIndex, columnIndex }) => {
  column.index = columnIndex;
  row.index = rowIndex;
};
const cellClick = (row, column, cell, event) => {
  state.rowIndex = row.index;
  state.columnIndex = column.index;
};
</script>

<style lang="scss" scoped>
.middle-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    border-left: 2px solid #5d9df5;
    padding-left: 4px;
    font-size: 16px;
    font-weight: 600;
  }
}
.btn_asset {
  margin: 8px 0;
  display: flex;
  justify-content: space-between;
}
::v-deep .el-dialog {
  padding: 0 !important;
}
::v-deep .el-dialog__title {
  margin: 8px 0px 0px 16px;
}
::v-deep .el-dialog__header {
  display: flex;
  align-items: center;
  height: 36px;
  border-bottom: 1px solid #dee1e6;
}
::v-deep .el-dialog__footer {
  height: 40px;
  display: flex;
  justify-content: center;
  border-top: 1px solid #dee1e6;
}
::v-deep .dialog-footer {
  height: 24px;
  margin-top: -8px;
}
::v-deep .el-dialog__body {
  padding-bottom: 0;
}
</style>
